<template>
  <div class="root-box"
    v-show="visible" :style="{position:'absolute',left:locationX+'px',top:locationY+'px'}">
    <exclusive-gateway
      @click.native="addNextNode(FormComponentName.ExclusiveGateway)"
      id="exclusive-gateway-id"
    ></exclusive-gateway>
  </div>
</template>

<script>
import ExclusiveGateway from "@/components/ExclusiveGateway";
import {mapMutations, mapState} from "vuex";
import FormComponentName from "@/components/FormComponentName";

export default {
  name: "nodeSelectDialog",
  components: {
    ExclusiveGateway
  },
  data() {
    return {

      FormComponentName
    }
  },
  computed: {
    ...mapState(['NodeSelectDialog']),
    visible(){
      return this.NodeSelectDialog.visible
    },
    locationX(){
      return this.NodeSelectDialog.locationX
    },
    locationY(){
      return this.NodeSelectDialog.locationY
    },
  },
  methods: {
    ...mapMutations(['addComponent','hideNodeSelectDialog']),

    addNextNode(componentName) {

      console.log("添加下一个节点")
      this.addComponent(componentName)
      this.hideNodeSelectDialog()
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
.root-box {
  border: 1px solid black;
  width: 400px;
  height: 100px;
}

.root-box > * {
  float: left;
}
</style>
